<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>引出生命周期</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>

		<script type="text/babel">
			//定义组件
			class Demo extends React.Component{
				//生命周期回调函数 <=> 生命周期函数 <=> 生命周期钩子
				state = {opacity:1}
				//什么时候调用render？初始化的时候、更新的时候
				render(){
					console.log('---render---')
					return (
						<div>
							<h3 style={{opacity:this.state.opacity}}>分手了怎么办？</h3>	
							<button onClick={this.death}>不活了</button>
						</div>
					)
				}
				//组件完成挂载后调用（组件已经出现到页面之后）===> 张三出生了
				componentDidMount(){
					console.log('---componentDidMount---')
					this.timerId = setInterval(()=>{
						let {opacity} = this.state
						opacity -= 0.1
						if(opacity<=0) opacity = 1
						this.setState({opacity})
					},200)
				}
				//组件即将卸载（只调一次） =====> 张三即将驾鹤西游
				componentWillUnmount(){
					clearInterval(this.timerId)
				}
				//“不活了”按钮的回调
				death = ()=>{
					ReactDOM.unmountComponentAtNode(document.getElementById('root'))
				}
			}
			//渲染组件
			ReactDOM.render(<Demo/>,document.getElementById('root'))
		</script>
	</body>
</html>